<template>
  <div class="information-panel" v-if="flag === 'kf'">
    <h2 class="title" :class="!showInformation ? 'hide' : ''" @click="showInfo">
      <span>{{$t('webchat.sessionForm')}}</span>
      <i class="icon el-icon-arrow-down" v-show="!showInformation"></i>
      <i class="icon el-icon-arrow-up" v-show="showInformation"></i>
    </h2>
    <div class="information" v-show="showInformation">
      <div v-for="(item, index) in sessionFormList" :key="index" class="formItem">
        <p class="fl textWidth">{{item.name || ''}}</p>
        <el-popover
          placement="right"
          width="300"
          trigger="hover">
          <div class="formMsgLi" v-for="(data, i) in item.sessionFormSubmit" :key="i">
            <span class="formMsgLiAttr">{{i}}</span>:<span class="formMsgLiData" :title="data">{{data}}</span>
          </div>
          <p class="checkSessionForm fl" type="text" slot="reference">{{$t('webchat.view')}}</p>
        </el-popover>
        <p class="fr">{{item.time || ''}}</p>
      </div>
    </div>
  </div>
</template>

<script>
import { deepClone } from '@/utils/m7Utils'
export default {
  name: 'sessionForm',
  data () {
    return {
      flag: this.$store.getters.isEcommerce ? 'ecommerce' : 'kf',
      showInformation: false
    }
  },
  props: {
    chatInfo: Object,
    webchatData: Object
  },
  computed: {
    tabType () {
      let arr = this.$route.path.split('/')
      return arr[3]
    },
    sessionFormList () {
      if (!(this.tabType === 'webchat_todo' || this.tabType === 'webchat_all' || this.tabType === 'webchat_laterProcess' || this.tabType === 'webchat_queue')) {
        return []
      }
      const arr = deepClone(this.$store.state.webchat.current[this.tabType].sessionFormHistory[this.webchatData._id]) || []
      arr.forEach(item => {
        item.name = decodeURIComponent(item.name)
        try {
          item.sessionFormSubmit = JSON.parse(item.sessionFormSubmit)
        }
        catch {}
      })
      return arr
    }
  },
  watch: {
    'chatInfo._id' () {
      this.showInformation = false
    }
  },
  methods: {
    showInfo () {
      this.showInformation = !this.showInformation
      if (this.showInformation) {
        let account = this.$store.state.session.account.account
        window._hmt && window._hmt.push(['_trackEvent', '在线咨询', 'PM-表单信息', account])
        console.log(this.$store.state.webchat.current[this.tabType].sessionFormHistory[this.webchatData._id])
      }
    }
  }
}
</script>

<style lang="stylus" scoped>
  @import "./../../../../../assets/common.styl"
  .information-panel
    padding-top 20px
    padding-left 20px
    padding-right 20px
    .title
      font-size 14px
      font-weight 600
      color $cf-gray3
      cursor pointer
      .icon
        margin-left 5px
        font-size 11px
        color $cf-level4
    .hide
      padding-bottom 20px
      border-bottom solid 1px #d9d9d9

  .information
    padding-top 8px
    padding-bottom: 20px;
    border-bottom: solid 1px #d9d9d9
  .checkSessionForm
    font-size 12px
    padding-left: 10px;
    cursor: pointer;
    color: #459AE9;
  .textWidth
    max-width: 200px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;  
  .formItem
    clear: both;
    overflow: hidden;  
</style>
